<template>
	<view class="player" @tap="video_click">
		<video :id="`video${index}`" :src="video.url" :controls="false" :loop="true" :autoplay="autoplay"></video>
	</view>
</template>

<script>
	// 用来制作单击还是双击的事件
	let timer_id = null;
	export default {
		name: "player",
		props: {
			video: {
				type: Object,
				default: {}
			},
			index: {
				type: Number,
				default: 0
			}
		},
		onReady() {
			this.video_context = uni.createVideoContext(`video${this.index}`, this);
		},
		created() {
			// 第一个视频自动播放
			this.video_autoplay();
		},
		data() {
			return {
				// 播放状态
				play: false,
				dblclick: false,
				autoplay: false,
			};
		},
		onLoad() {},
		methods: {
			toJSON() {},
			player() {
				this.video_context.seek(0);
				this.video_context.play();
				// 改为播放状态
				this.play = true;
			},
			pause() {
				this.video_context.pause();
				// 改为暂停状态
				this.play = false;
			},
			video_click() {
				clearTimeout(timer_id);
				this.dblclick = !this.dblclick;
				timer_id = setTimeout(() => {
					// 单击
					if (this.dblclick) {
						// 处于非播放状态，点击视频可以播放
						if (!this.play) {
							this.video_context.play();
						} else {
							// 处于播放状态，点击视频可以暂停
							this.video_context.pause();
						};
						this.play = !this.play;
					} else {
						// 双击
						this.$emit("dblclick")
					};
					this.dblclick = false;
				}, 0.3 * 1000);
			},
			// 第一个视频自动播放
			video_autoplay() {
				if (this.index == 0) {
					//开启自动播放视频
					this.autoplay = true;
					// 并且把播放状态改为在播放
					this.play = true;
				};
			},
		},
	}
</script>

<style lang="scss" scoped>
	.player {
		width: 100%;
		height: 100%;

		>video {
			width: 100%;
			height: 100%;
		}
	}
</style>
